import React from 'react';
import Carousel from 'components/Carousel';
import S from './index.m.less';

let _preview;
export default function (index, list) {
    const renderItem = ({ item }) => (
        <div
            className={S.img}
            style={{ backgroundImage: `url(${item.img})` }}
            onClick={() => {
                _preview && _preview.close() && (_preview = 0);
            }}
        >
            <div className={S.text}>
                <h2>{item.title}</h2>
                <p className={S.desc}>{item.description}</p>
            </div>
        </div>
    );

    _preview = WPT.Modal.open(
        <Carousel
            initialSlide={index}
            wrapperClassName={S.previewWrap}
            mainClassName={S.main}
            data={list}
            renderItem={renderItem}
            draggable={!WPT.os.pc}
        />,
        {
            animation: false,
        }
    );
}
